<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        h1 {
            color: red;
            text-align: center;
        }

        table {
            margin: 0 auto;
            text-align: center;
            width: 800px;
        }

        .txt {
            width: 25px;
            text-align: center;
        }

        .reduce,
        .add {
            width: 20px;

        }

        .addBox {
            text-align: center;
            padding: 20px 10px;
        }

        .active {
            background-color: pink;
        }
    </style>
</head>

<body>
    <h1>大佬的购物车</h1>
    <div class="addBox">
        <!-- 添加商品 -->
        <label for="">商品名称：</label>
        <input type="text" placeholder="请输入商品的名称" class="productName">
        <label for="">商品单价：</label>
        <input type="text" placeholder="请输入商品的价格" class="productPrice">
        <button class="toAddCart">点击添加到购物车</button>
    </div>


    <table border='1' cellspacing='0' colspadding='0'>
        <thead>
            <tr>
                <th> <input type="checkbox" name="" id="" class="allCheck"> 全选</th>
                <th>商品</th>
                <th>价格</th>
                <th>数量</th>
                <th>小计</th>
                <th>操作</th>
            </tr>


        </thead>
        <tbody id='tbody'>
             <!-- <tr>
                <td><input type="checkbox" name="" id=""></td>
                <td> 迪丽热巴</td>

                <td> 500</td>
                <td>
                    <button class="reduce">-</button>
                    <input type="text" value='1' class="txt">
                    <button class="add">+</button>
                </td>
                <td> 500</td>
                <td><button class="del">删除</button></td>
            </tr> -->
        </tbody>

        <tfoot>
            <tr>
                <td><button class="clearCart">清空购物车</button></td>
                <td colspan="2"><span>选中商品数量</span> <span class="checkCount"></span></td>
                <td colspan="3"><span>总价:</span> <span class="totalPrice"></span></td>
            </tr>

        </tfoot>
    </table>

    <script>

        var data = [
            { txt: 'Casio/卡西欧 EX-TR350', price: 5999.88, num: 10 },
            { txt: 'Canon/佳能 PowerShot SX50 HS', price: 3888.50, num: 10 },
            { txt: 'Sony/索尼 DSC-WX300', price: 1428.50, num: 10 },
            { txt: 'Fujifilm/富士 instax mini 25', price: 640.60, num: 10 },
            { txt: 'javascript', price: 20000, num: 10 }];

        //需要实现哪些功能
        /*
        1  商品的信息展示list功能
        2  实现全选 反选功能
        3  实现删除功能
        4  实现商品数量的加加跟减减功能
        5   实现用户手动 输入数量功能
        6   实现商品的添加功能
        7   实现商品的全部(总价功能)
        8   实现 商品 选中的数量占 总数量的多少
        9   实现清空购物车
        10  选中高亮
        */
        var getList = '';
        // 1  商品的信息展示list功能

        var dataLength = data.length;
        var tbody = document.querySelector('#tbody');
        // console.log(thead.childNodes[0])
        // for(var key in data){
        //     var arr =`<tr>
        //         <td><input type="checkbox" name="" id=""></td>
        //         <td> ${data[key].txt}</td>

        //         <td> ${data[key].price}</td>
        //         <td>
        //             <button class="reduce">-</button>
        //             <input type="text" value='${data[key].num}' class="txt">
        //             <button class="add">+</button>
        //         </td>
        //         <td> 500</td>
        //         <td><button class="del">删除</button></td>
        //     </tr>`
        //    getList+=arr;
        // }
        // getList =tbody.innerHTML+getList
        // console.log(getList)
        // tbody.innerHTML = getList;
        // console.log(tbody.childNodes);
        tbody.innerHTML = '';
        for (var i = 0; i < data.length; i++) {
            var tr = document.createElement('tr');
            var td = document.createElement('td');
            td.innerHTML = '<input type="checkbox" name="" id="">'
            tr.append(td);

            var td = document.createElement('td');
            td.innerHTML = `${data[i].txt}`;
            tr.append(td);
            var td = document.createElement('td');
            td.innerHTML = `${data[i].price}`;
            tr.append(td);
            var td = document.createElement('td');
            td.innerHTML = `<button class="reduce">-</button>
                    <input type="text" value='1' class="txt">
                    <button class="add">+</button>`;
            tr.append(td);
            var td = document.createElement('td');
            td.innerHTML = '500';
            tr.append(td);
            var td = document.createElement('td');
            td.innerHTML = `<button class="del">删除</button>`;
            tr.append(td);
            tbody.append(tr);
        }



        // 2  实现全选 反选功能
        var allCheck = document.querySelector('.allCheck');
        // var td  =document.querySelector('td');
        // console.log(input)
        // console.log(td.parentNode)
        // console.log(tbody.childNodes.childrens);
        // tbody.childNodes[1].children[0].children.checked = true;
        // tbody.childNodes[1].children[0].children.checked = true;
        // console.log(tbody.childNodes.childNodes)
        console.log(tbody.childNodes[0].childNodes[0])
        allCheck.onclick = function () {
            var flag = allCheck.checked
            console.log(flag)
            if(flag){
                console.log(2)
                tbody.childNodes[0].childNodes[0].childNodes.checked = 'true';
            }

        }
    </script>
</body>

</html>